import { useNavigate } from "react-router-dom"; // 修正导入路径
import styles from './RightMask.module.css'; // 假设添加了样式导入

// 定义props类型接口
interface AnyMaskProps {
  maskid: string;
  maskName: string;
}

export default function AnyMask(props: AnyMaskProps) {
  const navigate = useNavigate();
  const { maskid, maskName } = props; // 解构props，使用更简洁
const generateUUID = () => {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    const r = Math.random() * 16 | 0;
    const v = c === 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
};

  // 点击时携带面具ID跳转，方便聊天页识别
const handleClick = async () => {
    const sessionId = generateUUID();
    console.log("==========================" + sessionId);
    
    try {
      const sessionData = {
        id: sessionId,
        creatTime: new Date().toISOString(),
        lastUpdate: new Date().toISOString(),
        topic: `新的${maskName}对话`, // 修复字符串拼接语法
        mask: { // 修复对象属性语法
        id: maskid // 修复属性值语法
        }
      };

      const response = await fetch('http://localhost:8080/session/add', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(sessionData)
      });

      if (!response.ok) {
        throw new Error(`请求失败: ${response.status}`);
      }

      navigate(`/Chat?sessionId=${sessionId}&maskId=${maskid}&maskName=${maskName}`);
    } catch (error) {
      console.error('保存会话时出错:', error);
    }
  };
// 修改后的fetch请求
  return (
    <div 
      className={styles.anymask} // 应用面具项样式
      onClick={handleClick}
      role="button"
      tabIndex={0}
      aria-label={`选择"${maskName}"面具，进入聊天页面`}
    >
      <div className={styles.maskIcon}>
        <i className="fa fa-user-secret"></i>
      </div>
      <span className={styles.maskName} >{maskName}</span> {/* 应用名称样式 */}
    </div>
  );
}
